/* 引入谷歌字体 */
@import url("http://fonts.googleapis.com/css?family=Righteous");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Righteous';
    font-weight: bold;
    --bg:#131313;
    background-color: var(--bg);
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    --x:1;
    --y:1;
}
h1{
    font-size: 5vw;
    color: var(--bg);
    text-align: center;
    text-shadow: -1px -1px 0 #fff,1px 1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,
    calc(var(--x) * -0.1vw) calc(var(--y) * -0.1vw) 0px hsl(calc(var(--x) + var(--y) * 11) 30% 50% / 40%),
    calc(var(--x) * -0.2vw) calc(var(--y) * -0.2vw) 1px hsl(calc(var(--x) + var(--y) * 12) 30% 50% / 36%),
    calc(var(--x) * -0.3vw) calc(var(--y) * -0.3vw) 2px hsl(calc(var(--x) + var(--y) * 13) 30% 50% / 32%),
    calc(var(--x) * -0.4vw) calc(var(--y) * -0.4vw) 3px hsl(calc(var(--x) + var(--y) * 14) 30% 50% / 28%),
    calc(var(--x) * -0.5vw) calc(var(--y) * -0.5vw) 4px hsl(calc(var(--x) + var(--y) * 15) 30% 50% / 24%),
    calc(var(--x) * -0.6vw) calc(var(--y) * -0.6vw) 5px hsl(calc(var(--x) + var(--y) * 16) 30% 50% / 20%),
    calc(var(--x) * -0.7vw) calc(var(--y) * -0.7vw) 6px hsl(calc(var(--x) + var(--y) * 17) 30% 50% / 16%),
    calc(var(--x) * -0.8vw) calc(var(--y) * -0.8vw) 7px hsl(calc(var(--x) + var(--y) * 18) 30% 50% / 12%);
}